<template>
	<view class="container">
		<view class="progress-box-sgin" v-bind:style="{width:getSginWid}">
			<view :animation="animationData" class="progress-box-sgin-n">{{current}}</view>
		</view>
		<view class="box" :style="[{width:getSginWid}]">
			<view class="progress-box-w" v-bind:style="[{background:progressColor,width:getSginWid}]">
				 <view class="progress-box-w-w" v-bind:style="{background:outColor}" :animation="animationData" >
					 <view class="progress-box-w-n" v-bind:style="{background:progressColor}"></view>
				 </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			},
			target: {
				type: Number,
				default: 100
			},
			time:{
				type: Number,
				default: 1000
			},
			progressColor:{
				type: String,
				default: '#57BE6A'
			},
			type:{
				type: String,
				default: "ease"
			},
			outColor: {
				type: String,
				default: '#7E7E7E'
			},
		},
		created() {
			uni.getSystemInfo({
				success:(res) => {
					this.wid = Math.floor(res.windowWidth * 0.68 ) 
				}
			})
			
			var animation = uni.createAnimation({
				duration: this.time,
				timingFunction: this.type,
			})
			this.animation = animation
			this.cpMobile()
			setTimeout(function() {
				animation.translate(this.mobilePx).step()
				this.animationData = animation.export()
			}.bind(this), 100)
		},
		computed:{
			getWid(){
				return this.wid.toString()+"px"
			},
			getSginWid(){
				return (this.wid+40).toString()+"px"
			}
		},
		data() {
			return {
				animationData: {},
				mobilePx:0,
				wid: 280
			};
		},
		methods: {
			cpMobile(){
				let moreThan = Boolean(parseFloat(this.current/this.target) > 1 );
				if(moreThan){
					this.mobilePx = 1*(this.wid+40-14)
				}else{
					this.mobilePx=this.current/this.target*(this.wid+40-14)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		margin: auto auto;
		flex-direction: column;
	}
	.box{
		
	}
	.progress-box-sgin{
		height: 58rpx;
		margin: auto auto;
		position: relative;
		image{
			width: 43rpx;
			height: 58rpx;
			position: absolute;
			z-index: -9;
		}
	}
	.progress-box-sgin-n{
		// width: 3em;
		// height: 3em;
		// border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
		// background-color: gray;
		// transform: rotate(135deg);
		// -webkit-transform: rotate(135deg);

		text-align: center;
		position: relative;
		width: 43rpx;
		height: 58rpx;
		border-radius: 50rpx;
		background-image: url(../../static/images/center/local.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		font-size: 26rpx;
		line-height: 58rpx;
		color: #fff;
		right: 9rpx;
		bottom: 15rpx;
	}
	.box{
		overflow:hidden;
		height: 20px;
		position: relative;
	}
	.progress-box-w {
		// position: relative;
		// top: 13rpx;
		position: absolute;
		top: 19rpx;
		margin: auto auto;
		border-radius: 10rpx;
		background-color:  #FFFFFF;
		&::before{
			content: "";
			width:21rpx;
			height:21rpx;
			background:rgba(87,190,106,1);
			border-radius:50%;
			border: 3px solid #fff;
			display: block;
			position: absolute;
			bottom: -12rpx;
		}
	}
	.progress-box-w-w{
		border-radius: 10rpx;
		width: 100%;
		height: 6rpx;
		
	}
	.progress-box-w-n{
		height: 20rpx;
		background-color:  #FFFFFF;
		width: 20rpx;
		border-radius: 50%;
		position: absolute;
		bottom: -12rpx;
		border: 3px solid #fff;
	}
// 	.container {
// 		position: relative;
// 		.init-value,.target-value{
// 			position: absolute;
// 			color: #ccc;
// 			font-size: 36rpx;
// 			font-weight: bold;
// 			top: 60rpx;
// 		}
// 		.init-value{
// 			left: 0;
// 		}
// 		.target-value{
// 			right: 0;
// 		}
		
// 		.line-out{
// 			position: relative;
// 			height: 6rpx;
// 			width: 100%;
// 			background-color: #7E7E7E;
			
// 		}
// 		.current{
// 			position: relative;
// 			bottom: 1rpx;
// 			height: 8rpx;
// 			background-color: #57BE6A;
			
// 			// width: calc(100% - )
// 			&::before,&::after{
// 				content: "";
// 				width:21rpx;
// 				height:21rpx;
// 				background:rgba(87,190,106,1);
// 				border-radius:50%;
// 				border: 3px solid #fff;
// 				display: block;
// 				position: absolute;
// 				bottom: -12rpx;
// 			}
// 			&::after{
// 				right: 0;
// 			}
// 		}
// 	}
</style>
